<template>
	<view class="">
		<view class="input-group" style="margin-top: 0;">
			<view class="userinfoBox">
				<view class="input-row border">
					<text class="title title-require start-mark">姓名：</text>
					<m-input type="text" v-model="userInfo.RealName " placeholder="姓名"></m-input>
				</view>
				<view class="input-row border">
					<text class="title title-require start-mark">身份证：</text>
					<m-input type="text" :disabled="pageType==='edit'" v-model="userInfo.IDCard" placeholder="身份证"></m-input>
				</view>
				<view class="input-row border">
					<text class="title title-require start-mark">性别：</text>
					<picker @change="bindPickerChange" class="cuspicker"
					 range-key="DataValue" :value="gender_list[ch_index.Gender].DataCode" :range="gender_list"
					 data-type="Gender" data-state="userInfo" data-list="gender_list">
						<view class="picker cuspicker_item">
							{{ch_index.Gender ? gender_list[ch_index.Gender].DataValue : gender_list[userInfo.Gender].DataValue || '请选择'}}
						</view>
					</picker>
				</view>
				<view class="input-row border">
					<text class="title title-require start-mark">手机号：</text>
					<m-input type="text" v-model="userInfo.Phone" placeholder="手机号"></m-input>
				</view>
				<view class="input-row border">
					<text class="title title-require start-mark">所属公司：</text>
					<m-input type="text" v-model="userInfo.Company" placeholder="所属公司"></m-input>
				</view>
			</view>
			<template v-if="pageType=='add'">
				<view class="spa-line">
					<view class="line-fu"></view><text class="line-text">车辆信息</text>
				</view>
				<view class="carInfoBox">
					<view class="input-row border">
						<text class="title title-require start-mark">车牌号：</text>
						<m-input type="text" v-model="carInfo.licensePlateNO" placeholder="请输入"></m-input>
					</view>
					<view class="input-row border">
						<text class="title title-require start-mark">车型：</text>
						<picker @change="bindPickerChange" class="cuspicker"
						 range-key="DataValue" :value="truckType_list[ch_index.Gender].DataCode" :range="truckType_list"
						 data-type="truckType" data-state="carInfo" data-list="truckType_list">
							<view class="picker cuspicker_item">
								{{ch_index.car ? truckType_list[ch_index.car].DataValue : carInfo.truckType || '请选择'}}
							</view>
						</picker>
					</view>
				</view>
			</template>

		</view>

		<view class="cus-footer lg-box footer-box">
			<button open-type="getUserInfo" class="cu-btn round lg bg-blue cus-btn" @getuserinfo="saveInfo">保存</button>
		</view>

	</view>
</template>

<script>
	import mInput from '@/components/m-input.vue';
	export default {
		components: {
			mInput
		},
		data() {
			return {
				userInfo: {
					OpenID: '',
					RealName: '',
					AvatarUrl: '',
					IDCard: '',
					Gender: '',
					Phone: '',
					Company:'',
					EncryptedData: '',
					IV: '',
				},
				carInfo: {
					licensePlateNO: '',
					truckType: ''
				},
				pageType: 'add',
				session: {},
				truckType_list:[{DataCode:'',DataValue:''}],
				gender_list:[
					{DataCode:'0',DataValue:'未知'}, 
					{DataCode:'1',DataValue:'男'},
					{DataCode:'2',DataValue:'女'}
				],
				ch_index:{truckType:0,Gender:''}
			}
		},
		mounted() {
			
			//获取车型
			this.$store.dispatch('uni/Config',{dataType:3}).then(res=>{
				this.truckType_list = res;
				//console.log('this.truckType_list---',this.truckType_list)
			})

		},
		onLoad(options) {
			this.pageType = options.type;
			const session = uni.getStorageSync('session') || {};
			this.session = session;
			console.log('options',this.session,options)
			if (options.type == 'edit') {
				uni.setNavigationBarTitle({
					title: '修改个人信息'
				})
				// this.userInfo = this.$store.state.uni.UserInfo;
				this.userInfo=this.session.userInfo
				if(this.userInfo.Phone){
					this.$store.dispatch('uni/UserInfo',{openid:this.session.openid}).then((res)=>{
						this.userInfo = res.Data;
						this.ch_index.Gender = res.Data.Gender;
					})
				}
			
			} else {
				uni.setNavigationBarTitle({
					title: '注册信息'
				});
			}
		},
		methods: {
			bindPickerChange(e) {
				const {
					type,
					state,
					list
				} = e.currentTarget.dataset;
				console.log('bindPickerChange(e) ',e.currentTarget.dataset)
				this.ch_index[type] = e.detail.value;
				this[state][type] = this[list][e.detail.value].DataCode; //提交后台的code
			},
			saveInfo(e) {
				const {
					userInfo:info,
					encryptedData,
					iv
				} = e.detail;
				
				let uInfo=this.userInfo;
				if(uInfo.Phone){
					 if(!(/^1[3456789]\d{9}$/.test(uInfo.Phone))){ 
					    uni.showToast({
					    	title:'请填写正确的手机号码',
					    	icon:'none'
					    })
					     return; 
					    } 
				}
				if(uInfo.IDCard){
					if(!(/^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}[0-9Xx]$/.test(uInfo.IDCard))){
						uni.showToast({
							title:'请填写正确的身份证号码',
							icon:'none'
						})
						 return; 
						}
				}
				if(this.carInfo.licensePlateNO){
					if(!(/^(([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-Z](([0-9]{5}[DF])|([DF]([A-HJ-NP-Z0-9])[0-9]{4})))|([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-Z][A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9挂学警港澳使领]))$/.test(this.carInfo.licensePlateNO))){
						uni.showToast({
							title:'请填写正确的车牌号码',
							icon:'none'
						})
						 return; 
					}
				}
					
				if(!uInfo.RealName|| !uInfo.IDCard||!uInfo.Phone||!uInfo.Company|| this.gender_list[this.ch_index.Gender].DataValue=='未知' ){
					uni.showToast({
						title:'请完善个人信息',
						icon:'none'
					})
					return;
				}
				if(this.pageType=='add'){
					if(!this.carInfo.licensePlateNO||!this.carInfo.truckType){
						uni.showToast({
							title:'请完善车辆信息',
							icon:'none'
						})
						return;
					}
				}
				let params = {
					Gender: info.gender, // 性别 0：未知、1：男、2：女(可以手动修改，写在前面可被覆盖)
					...this.userInfo,
					OpenID: this.session.openid,
					AvatarUrl: info.avatarUrl,
					EncryptedData: encryptedData,
					IV: iv,
					method: 'POST'
				}
				console.log('保存----')
				this.register(params)
			},
			register(data) {
				let params = data;
				params.urlType = 'ModifyUser';
				if(this.pageType=='add'){
					params.queryParam = {
						...this.carInfo
					}
					params.urlType = 'RegisterUser';
					params.method = 'POST';
				}else{
					params.method = 'PUT';
				}
				console.log('params----',params)
				this.$store.dispatch('uni/osUser', params).then((res) => {
					if(res.Code===0){
						let session = uni.getStorageSync('session') || {};
						
						session.phone=this.userInfo.Phone
						session.userInfo.Gender=params.Gender
						session.userInfo.IDCard=this.userInfo.IDCard
						session.userInfo.Phone=this.userInfo.Phone
						session.userInfo.RealName=this.userInfo.RealName
						session.userInfo.Company=this.userInfo.Company
						uni.setStorageSync('session',session)
						console.log('?????',session)
				
						uni.switchTab({
							url:'/pages/user/user'
						})
					}else{
						console.log('888888',res)
						uni.showModal({
							title:'提示',
							content:res.Message,
							showCancel:false
						})
					}
					
					
				}).catch((res)=>{
				})
			}
		}

	}
</script>

<style scoped lang="scss">
	.cus-footer.lg-box.footer-box {
		padding: 15px;

		.cus-btn {
			width: 60%;
			height: 44px;
		}
	}

	.spa-line {
		background: rgba(240, 240, 240, 1);
		position: relative;
		height: 40px;
		line-height: 40px;
		margin: 5px auto;
		text-align: center;

		.line-fu {
			display: block;
			height: 1px;
			background: #e1e1e1;
			position: absolute;
			top: 12px;
			width: 100%;
		}

		.line-text {
			display: inline-block;
			font-size: 14px;
			color: #c1c1c1;
			padding: 0 30px;
			text-align: center;
			margin: 0 auto;
			position: relative;
		}
	}
	.input-group picker {
		text-align: left;
		width: 100%;
		height: 100%;
		padding-left: 30px;
	}
	
	.start-mark::before{
			content: '*';
			color: red;
			position: absolute;
			//top: 7px;
			left: 6px;
			font-size: 20px;
	
		}
</style>
